<template>
  <view class="classlist-page">
    <view class="loading" v-if="!wallList.length && !noDataState">
      <uni-load-more
        :status="noDataState ? 'noMore' : 'loading'"></uni-load-more>
    </view>

    <view class="container">
      <navigator
        :url="`/pages/preview/preview?id=${item._id}&name=${name}`"
        class="item"
        v-for="item in wallList"
        :key="item._id">
        <image :src="item.smallPicurl" mode="aspectFill"></image>
      </navigator>
    </view>

    <view class="loading" v-if="wallList.length || noDataState">
      <uni-load-more
        :status="noDataState ? 'noMore' : 'loading'"></uni-load-more>
    </view>

    <view class="safe-area-inset-bottom"></view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onUnload, onReachBottom } from '@dcloudio/uni-app'
import { apiWallList, apiHistoryList } from '@/api'

const params = ref({
  pageSize: 15,
  pageNum: 1,
})
const name = ref('')
const wallList = ref([])
const noDataState = ref(false)

onLoad(e => {
  console.log('%c Line:41 🎂 e', 'color:#e41a6a', e)
  const { id = 0, name: title, type = null } = e
  console.log('%c Line:43 🍭 id', 'color:#f5ce50', id, title, type)

  if (type) params.value.type = type
  if (id) params.value.classid = id
  name.value = title

  uni.setNavigationBarTitle({ title: name.value })
  getWallList()
})

onReachBottom(() => {
  if (noDataState.value) return
  params.value.pageNum++
  getWallList()
})

const getWallList = async () => {
  let data = []
  if (params.value.type) data = await apiHistoryList({ ...params.value })
  if (params.value.classid) data = await apiWallList({ ...params.value })

  // 防止下拉刷新时多次请求数据
  data.length < params.value.pageSize && (noDataState.value = true)
  if (!data.length) return

  wallList.value = [...wallList.value, ...data]
  uni.setStorageSync('b-classlist', wallList.value)
}

onUnload(() => {
  uni.removeStorageSync('b-classlist')
})
</script>

<style lang="scss" scoped>
.classlist-page {
  .container {
    padding: 20rpx;
    display: grid;
    gap: 12rpx;
    grid-template-columns: repeat(3, 1fr);

    .item {
      height: 400rpx;
      border-radius: 10rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
